import React, { useEffect } from 'react'
import { Button, Form, Input, Space, Card, Table, Tooltip } from 'antd'
import { SearchOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'
import type { ColumnsType } from 'antd/es/table'

//引入发送请求的函数
import { reqGetHospitalSets } from '@api/hospitalSet'

interface DataType {
  key: string
  name: string
  age: number
  address: string
  tags: string[]
}

const columns: ColumnsType<DataType> = [
  {
    title: '序号', // 控制当前列的标题
    // dataIndex的作用也分为两种情况:
    // 1. 写了render函数,则dataIndex决定了render函数中第一个参数的值
    // 2. 不写render函数,则dataIndex决定了这一列渲染什么
    // dataIndex: 'address',
    // key: 'name', // key是当前这一列的唯一标识符,但是可以不写
    // 如果写了render函数,则render函数的返回值决定了这一列渲染什么内容
    render: (a, b, c) => {
      // console.log(a, b, c)
      // 第一个参数a: 的值不固定,分为两种情况:
      // 1. 没写dataIndex的时候,第一个参数和第二个参数一样,都是数据对象
      // 2. 写了dataIndex,dataIndex的值是dataSource中数据对象的属性.那么第一个参数就是这个属性的值
      // 第二个参数b: 永远固定为dataSource这个数据中对应的数据对象
      // 第三个参数c: 永远是数据对象在dataSource数组中的下标
      return c + 1
    },

    align: 'center', // 让这一列的文本水平居中
  },
  {
    title: '医院名称',
  },
  {
    title: '医院编码',
  },
  {
    title: 'api基础路径',
  },
  {
    title: '签名',
  },
  {
    title: '联系人名称',
  },
  {
    title: '联系人手机号',
  },
  {
    title: '操作',
    render() {
      return (
        <Space>
          {/* 鼠标移动到Button上方,Tooltip会在Button上方出现提示文本 */}
          <Tooltip title="修改医院">
            <Button type="primary" icon={<EditOutlined />}></Button>
          </Tooltip>
          <Tooltip title="删除医院">
            <Button type="primary" danger icon={<DeleteOutlined />}></Button>
          </Tooltip>
        </Space>
      )
    },
    width: 100, // 控制这一列的宽度
    fixed: 'right', //当前列在右侧固定
  },
]

const data: DataType[] = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
]

export default function HospitalSet() {
  // 注意: 模拟挂载的回调,不允许定义为异步函数
  useEffect(() => {
    ;(async function () {
      const result = await reqGetHospitalSets(1, 5)
      console.log(result.records)
    })()
  }, [])

  const onFinish = (values: any) => {
    console.log('Success:', values)
  }

  return (
    // Card组件拥有白色背景颜色和内边距
    <Card>
      <Form
        // layout属性用来控制表单中的表单元素布局方式
        layout="inline"
        name="basic" // 表单的名称
        // antd中默认支持栅格系统.一行24列.
        // labelCol是指表单元素的描述文本部分
        // wrapperCol是值表单元素部分
        // span表示当前部分一行中占多少份
        // labelCol={{ span: 8 }}
        // wrapperCol={{ span: 16 }}
        // initialValues用来设置表单中表单元素的初始值
        // remember是某个Form.Item组件的name属性的值.这个name属性就代表了这个表单元素
        initialValues={{ remember: false }}
        // 当用户点击了表单元素的提交按钮,表单会默认进行表单校验.如果校验通过,则触发onFinish.如果表单校验触发,会触发onFinishFailed

        // 如果没有表单校验,则只要点击了提交按钮,就会触发onFinish.此时onFinishFailed就没有用了
        onFinish={onFinish}
        // onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        {/* Form.Item用于包裹表单元素 */}
        <Form.Item
          // label="Username" // label是表单元素的描述文本
          name="hosname" //name的值用来控制当前的表单元素(相当于就是表单元素的name属性)
          // 当前表单元素的校验规则
          // rules={[
          //   {
          //     // required: true 表示当前表单元素必填
          //     required: true,
          //     // 表单校验不通过是的提示文本
          //     message: 'Please input your username!',
          //   },
          // ]}
        >
          {/* 注意: 这个Input是antd中的组件.但是最终渲染的还是文本框 */}
          <Input placeholder="医院名称" />
        </Form.Item>

        <Form.Item
          // label="Password"
          name="hoscode"
          // rules={[{ required: true, message: 'Please input your password!' }]}
        >
          {/* 这是密码框 */}
          {/* <Input.Password /> */}
          <Input placeholder="医院编码" />
        </Form.Item>

        {/* <Form.Item
          name="remember"
          valuePropName="checked"
          // offset表示当前表单元素在栅格系统中偏移8份的位置
          wrapperCol={{ offset: 8, span: 16 }}
        > */}
        {/* Checkbox 是antd的组件,代表html中的复选框 */}
        {/* <Checkbox>Remember me</Checkbox>
        </Form.Item> */}

        <Form.Item>
          {/* 注意: 并不是写在Form表单中的Button都是提交按钮.只有写了htmlType="submit"的Button才是当前表单的提交按钮 */}
          <Space>
            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
              查询
            </Button>
            <Button>清空</Button>
          </Space>
        </Form.Item>
      </Form>
      {/* Space为包裹的组件添加间隔 */}
      <Space style={{ marginTop: 20, marginBottom: 20 }}>
        <Button type="primary">添加</Button>
        <Button type="primary" danger disabled>
          批量删除
        </Button>
      </Space>

      {/*  
        columns决定了Table组件中有多少列
        dataSource 决定了Table组件中有多少行(条)数据
        scroll={{x:1500}}  让表格支持滚动. x代表是水平方向滚动. 1500是x的值单位是px
        1500代表了可滚动的距离

        bordered 让表格中显示边框
        */}
      <Table
        columns={columns}
        dataSource={data}
        scroll={{ x: 1500 }}
        bordered
      />
    </Card>
  )
}
